import defaltImg from '@/assets/images/200.png'
// 引入监听是否进入视口
import { useIntersectionObserver } from '@vueuse/core'
const plugin = {
  // 需要拿到main.js中由createApp方法产出的app实例对象
  install (app) {
    // 定义全局指令// app实例身上有我们想要的全局注册指令方法  调用即可
    app.directive('imgLazy', {
      mounted (el, binding) { // mounted这里与vue2中inserted一致，都有形参el(dom元素)和binding.value(指令对应值)图片url地址
        // 监听目标元素是否进入视口 --参数 1是要监听的元素，参数 2中isIntersecting是布尔值，进入视口为true，observerElement是监测信息，参数3指触发回调时进入视口区域的面积
        // 监听开始则不会结束，除非手动关闭
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }], observerElement) => {
          // console.log(isIntersecting)
          if (isIntersecting) { // 判断图片进入视口
            // 当图片url无效加载失败的时候使用默认图片替代
            el.onerror = function () {
              el.src = defaltImg
            }
            el.src = binding.value
            stop()// 监听至图片加载完成则停止监听
          }
        }, { threshold: 0 })// 刚进入视口区域就立刻执行回调 取值：0 - 1
      }
    })
  }
}

export default plugin
